<template>
  <div ref="chartRef3" :style="{ width, height }" class="chart"></div>
</template>

<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '100%',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      required: true,
      default: () => [],
    },
    xAxisData: {
      type: Array,
      default: () => ['邻里', '租赁', '扰民', '情感'],
    },
    legendTitles: {
      type: Array,
      default: () => ['数量', '案件关联数'],
    },
    islegendShow: {
      type: Boolean,
      default: true,
    },
    colorAreaArr: {
      type: Array,
      default: () => [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#0089FF', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(0,137,255,0.1)', // 100% 处的颜色
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#4BFFA9', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(58,250,144,0.1)',
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(87, 213, 248, 1)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(44, 170, 239, 1)', // 100% 处的颜色
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(193, 118, 251, 1)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(142, 65, 246, 1)', // 100% 处的颜色
            },
          ],
        },
      ],
    },
    colorTextArr: {
      type: Array,
      default: () => ['#4F8DFF', '#4BFFA9', '#3196FA', '#8E41F6'],
    },
    total: {
      type: Number,
      default: 0,
    },
  });
  const chartRef3 = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef3 as Ref<HTMLDivElement>);
  watch(
    () => props.loading,
    () => {
      if (!props.loading) {
        return;
      }
      //TODO
      initChart();
    },
    { immediate: true }
  );
  function initChart() {
    const series = props.chartData.map((item: any, index) => {
      return {
        name: props.legendTitles[index],
        type: 'bar',
        // stack: 'total',
        barGap: '0',
        barMaxWidth: 6,
        itemStyle: {
          color: props.colorAreaArr[index],
          borderRadius: [0],
          borderColor: props.colorTextArr[index],
          borderWidth: 1,
        },
        label: {
          show: true,
          color: '#fff',
          position: 'right',
          formatter(p) {
            return p.value;
          },
        },
        data: item,
      };
    });
    setOptions(
      {
        // backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          // backgroundColor: 'rgba(225,225,225,0.7)',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'dashed',
            },
          },
          padding: [2, 4],
          textStyle: {
            fontSize: 12,
            // lineHeight: 14,
          },
          // formatter: function (params) {
          //   var result = params[0].name + '<br>'
          //   params.forEach(function (item) {
          //     if (item.value) {
          //       if (item.seriesName == '准确率') {
          //         result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '%</br>'
          //       } else {
          //         result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '</br>'
          //       }
          //     } else {
          //       result += item.marker + ' ' + item.seriesName + ' :  - </br>'
          //     }
          //   })
          //   return result
          // }
        },
        grid: {
          left: 30,
          bottom: 20,
          right: 20,
          top: props.islegendShow ? 40 : 10,
        },
        legend: {
          show: props.islegendShow,
          top: 6,
          right: -4,
          itemWidth: 6,
          itemHeight: 6,
          // icon: 'circle',
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.5)',
          },
          data: props.legendTitles as [],
        },
        calculable: true,
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            // boundaryGap: [0, 0.01],
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(169,180,223,0.18)',
              },
            },
            axisLabel: {
              color: 'rgba(255,255,255,0.5)',
              fontSize: 10,
              interval: 0,
              rotate: 30,
            },
            data: props.xAxisData as [],
          },
        ],
        xAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#A9B4DF',
              },
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['rgba(169,180,223,0.18)'],
                width: 1,
                type: 'solid',
              },
            },
            boundaryGap: [0, 0.01],
          },
        ],

        series: series as [],
      },
      true
    );
  }
</script>

<style scoped>
  .chart {
    /* background: url(@/assets/images/screen/chart-bg.svg) no-repeat 40px calc(100% - 20px);
    background-size: 87% auto; */
  }
</style>
